import React from 'react';
import {deepFullCopy, messages} from 'share/common'
import { Form, Modal, Icon, Checkbox, Button, message } from 'antd'
const CheckboxGroup = Checkbox.Group;
import LanguageInput from 'components/template/language-input/language-input'
import documentService from 'containers/setting/help-document-management/help-document.service'
import 'styles/setting/help-document-management/new-document-title.scss'
import { connect } from 'react-redux'

class NewDocumentTitle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      docTitle: '',
      i18n: [],
    }
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      docTitle: nextProps.info.docTitle,
      i18n: nextProps.i18nName || [],
    })
  }

  handleNameChange = (value, i18n) => {
    this.setState({
      docTitle: value,
      i18n
    })
  };

  //新建／编辑文档
  handleNew = () => {
    const { info, parentId } = this.props;
    const { docTitle, i18n } = this.state;
    let params = deepFullCopy(info);
    params.docTitle = docTitle;
    params.i18n = params.i18n || {};
    params.i18n.docTitle = i18n;
    params.parentId = params.parentId || parentId;
    this.setState({ loading: true });
    documentService.editDocument(params, info.id ? 'put' : 'post').then(res => {
      this.setState({ loading: false });
      this.props.afterSave(res.data);
      message.success(messages('basic-11.key112')/*保存成功*/)
    }).catch(() => {
      this.setState({ loading: false })
    })
  };

  render() {
    const { loading, docTitle, i18n } = this.state;
    const { info } = this.props;
    const languageList = [
      {code: "zh_CN", comments: "简体中文", type: "language", value: messages('basic-11.key140')/*简体中文*/},
      {code: "zh_TW", comments: "繁体中文", type: "language", value: messages('basic-11.key141')/*繁体中文*/},
      {code: "en", comments: "English", type: "language", value: messages('basic-11.key142')/*英文*/},
      {code: "ja", comments: "日本语", type: "language", value: messages('basic-11.key143')/*日语*/},
      {code: "it_IT", comments: "Italiano", type: "language", value: messages('basic-11.key144')/*意大利语*/},
    ];
    const languageInputRule = [
    {
      length: 200,
      language: "zh_cn"
    },{
       length: 200,
       language: "zh_tw"
    },{
       length: 200,
       language: "en"
    },{
      length: 200,
      language: "ja"
    },{
        length: 200,
        language: "it_IT"
      }];
    return (
      <div className="new-document-title">
        <div className="new-document-title-container"/>
        <Modal title={messages('basic-11.key159')/*章节名称*/}
               visible={this.props.visible}
               getContainer={() => document.getElementsByClassName('new-document-title-container')[0]}
               onCancel={this.props.onCancel}
               footer={(
                 <div className="modal-footer-btn">
                   <Button onClick={this.props.onCancel} className="cancel">{messages('common.cancel')/*取消*/}</Button>
                   <Button type="primary" loading={loading} onClick={this.handleNew}>{messages('basic-11.key122')/*确认*/}</Button>
                 </div>
               )}
        >
          <LanguageInput
            isEdit={info.docTitle}
            name={docTitle}
            i18nName={i18n}
            customLanguageList={languageList}
            inpRule={languageInputRule}
            nameChange={this.handleNameChange}
          />
        </Modal>
      </div>
    )
  }
}

NewDocumentTitle.propTypes = {
  visible: React.PropTypes.bool,
  i18nName: React.PropTypes.array,
  info: React.PropTypes.object,
  parentId: React.PropTypes.string,
  onCancel: React.PropTypes.func,
  afterSave: React.PropTypes.func,
};

function mapStateToProps(state) {
  return {
  }
}

const WrappedNewDocumentTitle = Form.create()(NewDocumentTitle);
export default connect(mapStateToProps)(WrappedNewDocumentTitle);
